<template>
	<view class="nav">
		<view class="" :style="'height:'+status+'rpx;'+contanierStyle"></view>
		<view v-if="isHome" class="headNav" :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;padding-left:20rpx;'">
			<text class="city">中部地区</text>
			<view style="flex: 1;" class="">
				<navigator url="../../pages/search/index" :style="'height:'+menu.height*2+'rpx;line-height:'+menu.height*2+'rpx;margin-top:'+(menu.top*2-status)+'rpx;margin-left:32rpx;margin-right:'+(menu.width*2+24)+'rpx;background:#f1e7e7;border-radius:200rpx;text-align:center;'">
					<text class="search-text">找医院</text>
				</navigator>
			</view>
		</view>
		<view v-else class="navbar" :style="'height:'+navHeight+'rpx;'+contanierStyle">
			<view class="back-icon" @click="backOrHome">
				 <image v-if="pages >1" src="../../static/resource/navbar/ic_back.png"></image>
				<image v-else src="../../static/resource/navbar/ic_home.png"></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;'+textStyle">
					{{titleText}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onBeforeMount,ref,defineProps,defineEmits,reactive } from 'vue';
	const props =defineProps({
		background:{
			type:String,
			default: 'rgba(255,255,255,1)'
		},
		color: {
			type:String,
			default: 'rgba(0,0,0,1)'
		},
		fontSize: {
			type:Number,
			default: 32
		},
		iconWidth: {
			type:Number,
			default: 116
		},
		iconHeight: {
			type:Number,
			default: 38
		},
		titleText: {
			type: String,
			default: ''
		},
		isHome: {
			type:Boolean,
			default: false
		}
	})
	const emits = defineEmits(['navBarAttached'])
	onBeforeMount(() => {
		setNavSize()
		setStyle()
		emits('navBarAttached', {
			detail: {
				statusHeight:status.value,
				navHeight:navHeight.value,
				navBarHeight: status.value+navHeight.value
			}
		})
	})
	// 状态栏高度
	const status = ref(0)
	// 内容高度
	const navHeight = ref(0)
	// 背景颜色
	const contanierStyle = ref('');
	// 字体样式
	const textStyle = ref('');
	// 图标样式
	const iconStyle = ref('')
	// 页面栈的数量
	const pages = ref(getCurrentPages().length)
	// 获取胶囊的位置
	const menu = reactive(uni.getMenuButtonBoundingClientRect())
	// 计算状态栏的高度
	const setNavSize = () => {
		const {system,statusBarHeight} = uni.getSystemInfoSync()
		status.value = statusBarHeight * 2;
		const isios = system.indexOf('iOS') > -1
		if (!isios) {
			navHeight.value = 96
		} else {
			navHeight.value = 88
		}
	}
	// 样式设置
	const setStyle =() => {
		contanierStyle.value = ['background:'+props.background].join(';')
		textStyle.value = ['color:'+props.color, 'font-size:'+props.fontSize+'rpx'].join(';')
		iconStyle.value = ['width:'+props.iconWidth+'rpx','height:'+props.iconHeight+'rpx'].join(';')
	}
	const backOrHome = () => {
		if (pages.value >1) {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: '/pages/index/index' 
			})
		}
	}
</script>

<style>
.nav{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}
.back-icon{
	display: flex;
	align-items: center;
	width: 64rpx;
	height: 100%;
	margin-left: 20rpx;
}
.back-icon image {
	width: 64rpx;
	height: 64rpx;
}
.navbar{
	position: relative;
}
	
.nav-title {
	position: absolute;
	top:0;
	left: 50%;
	transform: translate(-50%);
}
.headNav {
	display: flex;
}
.city {
	    display: inline-block;
	    position: relative;
	    font-size: 30rpx;
	    font-weight: bold;
	    padding-left: 55rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 40rpx;
	}
	
	.city:after {
	    content: ' ';
	    display: inline-block;
	    height: 6px;
	    width: 6px;
	    border-width: 1px 1px 0 0;
	    border-color: #353535;
	    border-style: solid;
	    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    position: relative;
	    top: -2px;
	    position: absolute;
	    top: 50%;
	    margin-top: -4px;
	    right: -10px;
	}
</style>